<template>
  <div>
    <topicback :topic="topicName"></topicback>
    <div class="surplus-miaobi">
      <p>{{miaobiNumber}}</p>
    </div>
    <div class="recharge-miaobi">
      <div class="select-one" v-for="(recharge, index) of rechargeNumber" :key="index" @click="changeOptionNumber(index, recharge.payConfigId)">
        <img :src="index == optionNumber ? picTwo : picOne" style="width: 100%;">
        <span class="miaobi">{{recharge.coin}}喵币</span>
        <span class="money">￥{{recharge.money}}</span>
      </div>
    </div>
  </div>
</template>

<script>
  import picOne from '../assets/picture/miaobi.png'
  import picTwo from '../assets/picture/miaobi_sel.png'
  import topicback from '../components/topic-back.vue'
  export default {
    name: 'surplus',
    components: {
      topicback
    },
    data () {
      return {
        hasHeader: '',
        miaobiNumber: 0,
        rechargeNumber: '',
        optionNumber: 0,
        picOne: picOne,
        picTwo: picTwo,
        topicName: '剩余喵币',
        rechargeId: ''
      }
    },
    created () {
      document.body.style.backgroundColor = '#ffffff'
    },
    beforeMount () {
      this.hasHeader = this.$utils.getQueryStringByName('token') ? this.$utils.getQueryStringByName('token') : this.$utils.getCookie('WAWA_TOKEN')
    },
    mounted () {
      document.oncontextmenu = function (e) {
        e = window.event || event
        e.preventDefault()
      }
      this.userDetail()
      this.rechargeMiaoBi()
    },
    methods: {
      userDetail () {
//        this.$http({
//          method: 'get',
//          url: 'https://www.likewawa.com/miaozhuapc/v1/user/getUserDetail',
//          headers: {'WAWA_TOKEN': this.hasHeader},
//          emulateJSON: true
//        }).then(function (response) {
//          response = JSON.parse(response.bodyText)
//          this.miaobiNumber = response.body.coin
//        }, function () {
//          console.log('稍后重试')
//        })
        var that = this
        this.$axios.get('https://www.likewawa.com/miaozhuapc/v1/user/getUserDetail',
          {headers: {'WAWA_TOKEN': this.hasHeader}})
          .then(function (response) {
            console.log(response.data.body)
            console.log(that)
            response = response.data.body
            that.miaobiNumber = response.coin
          })
          .catch(function (error) {
            console.log(error)
          })
      },
      rechargeMiaoBi () {
        this.$http({
          method: 'get',
          url: 'https://www.likewawa.com/miaozhuapc/v1/user/getPayConfig',
          emulateJSON: true
        }).then(function (response) {
          response = JSON.parse(response.bodyText)
          this.rechargeNumber = response.body
          this.rechargeId = this.rechargeNumber[0].payConfigId
        }, function () {
          console.log('稍后重试')
        })
      },
      changeOptionNumber (index, rechargeID) {
        // rechargeID 充值id
        this.optionNumber = index
        var that = this
        this.$axios.get('https://www.likewawa.com/miaozhuapc/v1/wx/wxpay?payConfigId=' + rechargeID + '&channel=JSAPI',
          {headers: {'WAWA_TOKEN': this.hasHeader}}
          // {params: {'payConfigId': rechargeID, 'channel': 'JSAPI'}}
        ).then(function (response) {
          response = response.data.body
          var resAppId = response.appId
          var resTimeStamp = response.timeStamp
          var resNonceStr = response.nonceStr
          var resPackage = response.package
          var resSignType = response.signType
          var resPaySign = response.paySign
          if (typeof WeixinJSBridge === 'undefined') {
            if (document.addEventListener) {
              document.addEventListener('WeixinJSBridgeReady', that.onBridgeReady, resAppId, resTimeStamp, resNonceStr, resPackage, resSignType, resPaySign, false)
            } else if (document.attachEvent) {
              document.attachEvent('WeixinJSBridgeReady', that.onBridgeReady, resAppId, resTimeStamp, resNonceStr, resPackage, resSignType, resPaySign)
              document.attachEvent('onWeixinJSBridgeReady', that.onBridgeReady, resAppId, resTimeStamp, resNonceStr, resPackage, resSignType, resPaySign)
            }
          } else {
            that.onBridgeReady(resAppId, resTimeStamp, resNonceStr, resPackage, resSignType, resPaySign)
          }
        })
        .catch(function (error) {
          console.log(error)
        })
      },
      onBridgeReady (resAppId, resTimeStamp, resNonceStr, resPackage, resSignType, resPaySign) {
//        alert(appId + ',' + timeStamp + ',' + nonceStr + ','  + prepayId + ',' + paySign)
        WeixinJSBridge.invoke(
          'getBrandWCPayRequest', {
            'appId': resAppId,             // 公众号名称，由商户传入
            'timeStamp': resTimeStamp,     // 时间戳，自1970年以来的秒数
            'nonceStr': resNonceStr,       // 随机串
            'package': resPackage,
            'signType': resSignType,       // 微信签名方式
            'paySign': resPaySign          // 微信签名
          },
          function (res) {
//            alert(res)
            // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
            if (res.err_msg === 'get_brand_wcpay_request:ok') {
              location.reload()
              console.log('充值成功')
            } else {
              console.log('充值失败')
            }
          }
        )
      }
    }
  }
</script>

<style scope lang="scss">
  html{
    height: 100%;
  }
  .surplus-miaobi{
    height: 126px;
    background: #ffdf58;
    padding-top: 37px;
    p{
      font-size: 35px;
      color: #1e1e1b;
      font-weight: bold;
      text-align: center;
    }
  }
  .recharge-miaobi{
    overflow: hidden;
    margin: 20px 15px;
    .select-one{
      float: left;
      margin-bottom: 15px;
      width: calc(50% - 7.5px);
      position: relative;
      &:nth-child(odd){
        margin-right: 7.5px;
      }
      &:nth-child(even){
         margin-left: 7.5px;
       }
    }
    .miaobi{
      position: absolute;
      right: 18px;
      top: 15px;
      font-size: 14px;
      color: #ffffff;
      font-weight: bold;
      text-shadow: 0 1px #000000, 1px 0 #000000, -1px 0 #000000, 0 -1px #000000;
    }
    .money{
      position: absolute;
      right: 18px;
      bottom: 12px;
      color: #ff5371;
      font-size: 17px;
      font-weight: bold;
      text-shadow: 0 1px #000000, 1px 0 #000000, -1px 0 #000000, 0 -1px #000000;
    }
  }
  @media screen and (max-width: 360px) {
    .recharge-miaobi{
      .miaobi{
        right: 15px;
        top: 12px;
      }
      .money{
        right: 15px;
        bottom: 9px;
      }
    }
  }
  @media screen and (max-width: 320px) {
    .recharge-miaobi{
      .miaobi{
        right: 15px;
        top: 8px;
      }
      .money{
        right: 15px;
        bottom: 8px;
      }
    }
  }
</style>
